<!doctype html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5">
        <title>؄ཽHuajiMC の 小宇宙ེᝰ ʕ̯•͡˔•̯᷅ʔ</title>
        <meta name="description" content="热爱编程 の HuajiMC 的互联网小宇宙">
        <meta name="keywords" content="PHP,Web,Android,编程,个人主页,前端,博客">
        <meta name="format-detection" content="telephone=no">
        <link rel="shortcut icon" href="favicon.ico">
        <link rel="preload" href="static/font/HanYiZhongYuanJian-1.woff2" as="font" type="font/woff2" crossorigin>
        <link rel="stylesheet" href="static/icon/iconfont.css">
        <link rel="stylesheet " href="static/css/index.css">
        <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
        <script type="text/javascript">
        if (!! window.ActiveXObject || "ActiveXObject" in window) { //is IE?
            alert('朋友，上古浏览器不支持呢~');
        }
        </script>
        <style>
        a {
            text-decoration: none;
        }
        .alphao {
            opacity: 0.82;
            filter: Alpha(opacity=82); /* IE8 以及更早的浏览器 */
        }
        </style>
    </head>
    <body>
        <div id="body-wrap" class="alphao">
            <main id="content-outer">
                <div class="layout_page" id="content-inner">
                    <div class="aside_content" id="aside_content">
                        <div class="card-widget card-info">
                            <div class="card-content">
                                <div class="card-info-avatar is-center non-pay">
                                    <img class="avatar-img" src="https://q.qlogo.cn/g?b=qq&amp;nk=3413517512&amp;s=640" alt="avatar">
                                    <div class="author-info__name">HuajiMC</div>
                                    <div class="author-info__description">少年何妨梦摘星，敢挽桑弓射玉衡</div>
                                </div>
                                <div class="card-info-avatar is-center pay" style="display:none">
                                    <img class="pay-img" src="static/img/pay.jpg" alt="pay">
                                    <div class="author-info__name">🎉恭喜触发彩蛋🥳</div>
                                    <div class="author-info__description">请动动您发财的小手手赞助一下 HuajiMC 😘</div>
                                </div>
                                <div class="card-info-social-icons is-center">
                                    <a class="social-icon" href="https://github.com/Huaji-MC" target="_blank"> <i class="iconfont icon-github"></i> </a>
                                    <a class="social-icon" href="https://qm.qq.com/q/CtMB944Anu" target="_blank"> <i class="iconfont icon-login-qq"></i> </a>
                                    <a class="social-icon" href="mailto:HuajiMC@126.com" target="_blank"> <i class="iconfont icon-email"></i> </a>
                                    <a class="social-icon" href="https://gitee.com/HuajiMC" target="_blank"> <i class="iconfont icon-gitee"></i> </a>
                                </div>
                            </div>
                        </div>
                        <div class="card-widget card-labels">
                            <div class="card-content label-list">
                                <div class="label">技术宅</div>
                                <div class="label">菜鸟</div>
                                <div class="label">学生</div>
                                <div class="label">编程</div>
                                <div class="label">网站</div>
                                <div class="label">数学</div>
                                <div class="label">社恐</div>
                                <div class="label">Minecraft</div>
                            </div>
                        </div>
                        <div class="card-widget card-announcement">
                            <div class="card-content">
                                <div class="item-headline">
                                    <i class="fa fa-bullhorn" aria-hidden="true"></i> <span>一言</span>
                                </div>
                                <div id="hitokoto"></div>
                            </div>
                        </div>
                        <div class="card-widget card-nav">
                            <div class="card-content">
                                <div class="item-headline">
                                    <i class="fa fa-bandcamp" aria-hidden="true"></i> <span>导航</span>
                                </div>
                                <div class="tool">
                                    <a href="#introduction">我的故事</a>
                                    <a href="#skillbox">技能列表</a>
                                    <a href="#project">项目与网站</a>
                                    <a href="#collection">收藏箱</a>
                                    <a href="#friendlink">友情链接</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <article id="page">
                        <div class="article-container">
                            <h2 id="introduction">✨我的故事</h2>
                            <div class="tool">
                                <p>欢迎来到 HuajiMC 的主页🏠，这里是一位编程爱好者在互联网上的专属领地 <emo>՞˶･֊･˶՞</emo> 你可以在这里初步了解 HuajiMC，也可以前往✈️<a href="http://blog.huajimc.cn">HuajiMC の Blog</a> 查看 HuajiMC 的📝学习心得和🏖生活动态 <emo>(ͼ̤͂ ͜ ͽ̤͂)✧</emo> 想要进一步🍆了解 HuajiMC，请浏览下方 Q&A：</p>
                                <details>
                                    <summary>为什么要叫 HuajiMC？</summary>
                                    <div class="folder">HuajiMC（滑稽MC）这个名字确实带有一丝稚气，甚至有人调侃它像一个小学生名字 <emo>(￣▽￣*)</emo> 其实它诞生于我的初中时期，大抵是我在初一时第一次使用这个名字，因为那时的滑稽MC爱玩 MC，且在网络上聊天喜欢发「滑稽」表情，由此得名。自此再没有改过，全网同名（<del>因为右脑发育不足想不出新的网名</del> 没想到这个随手取的名字就这样陪伴了我这么多年 <emo> ᶘ ᵒᴥᵒᶅ </emo> ）</div>
                                </details>
                                <details>
                                    <summary>你最开始是如何接触编程的？</summary>
                                    <div class="folder">我最开始接触编程与 MC 密切相关。大概是在2017年小学时期，被MC极高的自由度所吸引。看着别人制作的炫酷材质包、皮肤和模组，我也跃跃欲试。于是开始摸索 PE 版的 Js 插件开发，虽然最初的作品现在看来简直惨不忍睹——代码东拼西凑，功能简单粗糙，甚至还有不少“借鉴”的成分 <emo>(；一_一)</emo> 但正是这些稚嫩的小插件，为我打开了编程世界的大门（然而现在 Js 早已过时了😬）。</div>
                                </details>
                                <details>
                                    <summary>后来是如何转向 Web 开发的呢？</summary>
                                    <div class="folder">大概是 2020 年下半年，我偶然对建站产生了浓厚兴趣。还记得当时懵懂无知的我走了很多弯路，比如说花 68 元巨款买了一个超低配的虚拟主机 <emo>Σ_(꒪ཀ꒪」∠)</emo>（也算是交学费了）。最初的建站经历是用 Discuz! 等现成的开源系统搭建一些网站，无疑是没有流量的，纯属“过家家”式的尝试。渐渐地，我开始学习了前端三件套和 PHP，从简单的个人论坛到功能性的工具站（比如葫芦侠工具、HuajiBBS），在实践中不断磨练技术。</emo></div>
                                </details>
                                <details>
                                    <summary>高中阶段为何暂停了开发？</summary>
                                    <div class="folder">中考失利后，我决心要在高中努力学习。于是我决定暂停所有项目，将主要精力放在学习上。故而这三年我基本上没碰过代码，现在感觉自己已经落后时代了，嘤嘤嘤 <emo>T_T</emo> 其实现在看来当时到决定有点矫枉过正了，因为学业与兴趣本不冲突。而且我高中照样每天玩手机🙄，时间管理能力也没见长进呢，不如保留适度的 Coding 时间。</div>
                                </details>
                            </div>
                            
                            <hr>
                            
                            <h2 id="skillbox">⚡️技能列表</h2>
                            <div class="skillbox">
                                <div class="skillbar">
                                    <div class="skillbar-title" style="background: linear-gradient(to right, #2196F3 0%, #42A5F5 100%); width: 85%">
                                        <span>PHP</span>
                                    </div>
                                    <div class="skill-bar-percent">85%</div>
                                </div>
                                <div class="skillbar">
                                    <div class="skillbar-title" style="background: linear-gradient(to right, #9900FF 0%, #CC66FF 100%); width: 60%">
                                        <span>前端</span>
                                    </div>
                                    <div class="skill-bar-percent">60%</div>
                                </div>
                                <div class="skillbar">
                                    <div class="skillbar-title" style="background: linear-gradient(to right, #FFEB3B 0%, #FFF176 100%); width: 80%">
                                        <span>JavaScript</span>
                                    </div>
                                    <div class="skill-bar-percent">80%</div>
                                </div>
                                <div class="skillbar">
                                    <div class="skillbar-title" style="background: linear-gradient(to right, #FF0066 0%, #FF00CC 100%); width: 30%">
                                        <span>Java</span>
                                    </div>
                                    <div class="skill-bar-percent">30%</div>
                                </div>
                                <div class="skillbar">
                                    <div class="skillbar-title" style="background: linear-gradient(to right, #00BCD4 0%, #80DEEA 100%); width: 80%">
                                        <span>Web</span>
                                    </div>
                                    <div class="skill-bar-percent">80%</div>
                                </div>
                                <div class="skillbar">
                                    <div class="skillbar-title" style="background: linear-gradient(to right, #4CAF50 0%, #81C784 100%); width: 25%">
                                        <span>Android</span>
                                    </div>
                                    <div class="skill-bar-percent">25%</div>
                                </div>
                                <div class="skillbar">
                                    <div class="skillbar-title" style="background: linear-gradient(to right, #fda085 0%, #f6d365 100%); width: 65%">
                                        <span>MySQL</span>
                                    </div>
                                    <div class="skill-bar-percent">65%</div>
                                </div>
                            </div>
                            
                            <hr>
                            
                            <h2 id="project">🎉项目 / 网站</h2>
                            <div class="tool">
                                <ul style="padding-left: 1rem">
                                    <li><a href="http://blog.huajimc.cn" target="_blank">滑稽MC的博客</a></li>
                                    <li><a href="https://gitee.com/huajimc/HuajiBBS" target="_blank">HuajiBBS</a></li>
                                    <li>其他以前的杂七杂八的项目就不列上来了，太乱了，也懒得整理，从现在开始是 HuajiMC 新的一页啦～😇</li>
                                    <li>To be continued...</li>
                                </ul>
                            </div>
                            
                            <hr>

                            <h2 id="collection">📦收藏箱</h2>
                            <div class="tool">
                                <a href="https://moeyy.cn/gh-proxy/" target="_blank" rel="noopener noreferrer">Github下载加速</a>
                                <a href="https://www.catpasswd.com/" target="_blank" rel="noopener noreferrer">加密文件破解</a>
                            </div>
                            
                            <hr>
                            
                            <h2 id="friendlink">💕友链</h2>
                            <div class="tool">
                                <div class="friendlink">
                                    <div class="card" to="https://binarydev.top/">
                                        <img class="card-avatar" src="https://q.qlogo.cn/g?b=qq&nk=2035650646&s=640" />
                                        <div class="card-title">无愚の乌托邦</div>
                                        <div class="card-subtitle">一个沉迷编程的苦逼高中生</div>
                                    </div>
                                </div>
                                <p>申请友链请前往<a href="http://blog.huajimc.cn/index.php/friends.html" target="_blank">Blog 友链</a>按提示申请，此处友链与博客友链同步</p>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <div class="card-widget card-webinfo">
                            <div class="card-content">
                                <h2>站点信息</h2>
                                <div class="webinfo">
                                    <div class="webinfo-item">
                                        <div>本站自 <a href="javascript:void(0);">2025年6月9日</a> 开始运行</div>
                                    </div>
                                    <div class="webinfo-item">
                                        <div>目前已运行 <a href="javascript:void(0);" disabled id="runtime"></a> 天</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
            </main>
            <footer id="footer">
                <div id="footer-wrap" style="text-align：center">
                    <div class="copyright" style="">
                        Copyright © 2025 HuajiMC.
                    </div>
                    <a href="https://icp.gov.moe/?keyword=20251028" target="_blank">萌ICP备20251028号</a>
                </div>
            </footer>
        </div>
        <!-- Jquery -->
        <script src="https://gcore.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
        <!-- 一言 -->
        <script src="https://v1.hitokoto.cn/?encode=js&amp;select=%23hitokoto"></script>
        <!-- 屏幕点击特效 -->
        <script src="static/js/click.js"></script>
        <script>
        $(document).ready(function() {
            // <hr>剪刀点击动画
            $('hr').click(function() {
                if(! $(this).hasClass('scissors')) {
                    $(this).addClass('scissors');
                } else {
                    $(this).removeClass('scissors');
                }
            });
            
            // 运行时间
            function timePassed(year, month, day, hours) {
                var now = new Date();
                var endDate = new Date(year, month - 1, day, hours);
                var leftTime = - (endDate.getTime() - now.getTime());
                if (leftTime <= 0) {
                    leftTime = 0;
                }
                var leftsecond = parseInt(leftTime / 1000);
                var day = Math.floor(leftsecond / (60 * 60 * 24));
                var hour = Math.floor((leftsecond - day * 24 * 60 * 60) / 3600).toString().padStart(2, '0');
                var minute = Math.floor((leftsecond - day * 24 * 60 * 60 - hour * 3600) / 60).toString().padStart(2, '0');
                var second = Math.floor(leftTime / 1000 % 60, 10).toString().padStart(2, '0');
                return {day, hour, minute, second};
            }
            $('#runtime').text(timePassed(2025,6,9,0).day);
            
            $('[to]').click(function() {
                window.open($(this).attr('to'), '_blank');
            });
            
            // 头像点击彩蛋
            var deg = 30;
            $('.avatar-img').click(function() {
                $(this).css('transform', 'rotate(' + deg + 'deg)');
                
                if(deg % 360 == 0) {
                    setTimeout(function() {
                        $('.non-pay').hide();
                        $('.pay').show();
                    }, 400);
                }
                
                deg += 30;
            });
        });
        </script>
        
        <!-- 动态背景，不需要可以删掉 -->
        <div class="video-background">
            <video autoplay muted loop id="video1">
                <source src="static/img/bg3.mp4" type="video/mp4">
                Your browser does not support HTML5 video.
            </video>
            <video autoplay muted loop id="video2">
                <source src="static/img/bg2.mp4" type="video/mp4">
                Your browser does not support HTML5 video.
            </video>
        </div>
    </body>
</html>